<template>
  <nav class="nav-container">
    <div class="box" v-for="item in navList.entries" :key="item.id" @click="goCateShop(item)">
      <a class="item ellipsis flex-col-center" :href="item.url">
        <img-format class="item_img" :src="item.image_hash" :size="90" />
        <p class="name ellipsis">{{item.name}}</p>
      </a>
    </div>
  </nav>
</template>

<script>
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'index-nav',
  data() {
    return {
      navList: []
    }
  },
  components: {
    ImgFormat
  },
  async created() {
    const { res } = JSON.parse(window.sessionStorage.getItem('index-data'))
    this.navList = res[1]
  },
  methods: {
    goCateShop(item) {
      if(!this.$store.state.token){
        return this.$router.push('/login')
      } 
      this.$router.push({ name: 'cateshop', query: {
        id: item.id,
        fromPath: 'index'
      }})
    }
  }
}
</script>

<style scoped>
  .nav-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 300px;
  }
  .box {
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
  }
  .item {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .name {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 22px;
    color: #818181;
  }
  .item_img {
    height: 100px;
    width: 100px;
  }
</style>
